import React, {PureComponent} from "react";
import {Col, message, Row} from "antd";
import dragIcon from "../assets/img/drag.png";
import {actionCreator} from "./store";
import {connect} from "react-redux";
import {queryMonitorIndicator} from "../common/ApiUtils";

/**
 * 全局监控 头部功能模块
 *
 *  carTotalCount:0,      //总数量
 carOffLineCount:0,    //离线数量
 carVpvAlarmCount:0,     //电压异常
 carAmpereAlarmCount:0,   //电流异常
 carTemperatureAlarmCount:0,   //温度异常
 burglarEarlyAlarmCount:0,  //防盗预警
 *
 */
class FeatureComponent extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            featureExplain: [
                {
                    color: "#1fb0f0",
                    title: "总数量",

                    clsName: "TJfont icon-diandongche1"
                },
                {
                    color: "#f1735a",
                    title: "离线数量",
                    clsName: "TJfont icon-diandongche1"
                },
                {
                    color: "#ffb74b",
                    title: "电压异常",
                    clsName: "TJfont icon-skdianyuandianya-yunlevoltage"
                },
                {
                    color: "#fc8591",
                    title: "电流异常",
                    clsName: "TJfont icon-dianliu"
                },
                {
                    color: "#7e9ef8",
                    title: "温度异常",
                    clsName: "TJfont icon-wenduji"
                },
                {
                    color: "#28b779",
                    title: "防盗预警",
                    clsName: "TJfont icon-tongzhi"
                }]
        };
    }

    render() {

        const {featureExplain} = this.state;

        const featureCarData = [
            this.props.carStatisticsData.get("carTotalCount"),
            this.props.carStatisticsData.get("carOffLineCount"),
            this.props.carStatisticsData.get("carVpvAlarmCount"),
            this.props.carStatisticsData.get("carAmpereAlarmCount"),
            this.props.carStatisticsData.get("carTemperatureAlarmCount"),
            this.props.carStatisticsData.get("burglarEarlyAlarmCount")
        ];

        return (
            <div style={featureWrapperStyle}>
                <Row gutter={20}>
                    {
                        featureExplain.map((item, index) => {

                            return (
                                <Col className="gutter-row" span={4} key={index}>
                                    <div className="gutter-box"
                                         style={{...featureItemStyle, ...{borderTopColor: `${item.color}`}}}>
                                        <span className={item.clsName}
                                              style={{...featureIConStyle, ...{backgroundColor: `${item.color}`}}}/>

                                        <div style={featureExplainStyle}>
                                            <h3 style={explainTitleStyle}>{featureCarData[index]}</h3>
                                            <p style={explainContentStyle}>{item.title}</p>
                                        </div>
                                    </div>

                                </Col>
                            );
                        })
                    }

                </Row>

                <img style={featureDragStyle} src={dragIcon} alt={"点击消失"}/>
            </div>
        );
    }

    componentDidMount() {
        console.log("请求车辆数量 开始");
        queryMonitorIndicator(-1)
            .then(
                res => {
                    console.log("请求车辆数量,数据如下");
                    console.log(res);
                    if (res.resultStatus) {
                        this.props.changeCarData(res.data);
                    } else {
                        message.error("请求车辆数量出现错误", 1);
                    }
                },
                err => {
                    message.error("请求车辆数量出现异常", 1);
                }
            )
            .catch((res) => {
                message.error("请求车辆捕获异常" + res, 1);

            });


    }

}

const mapStatus = (status) => {

    return {
        carStatisticsData: status.getIn(["globalReducer", "carStatisticsData"]),
    };
};

const dispatchStatus = (dispatch) => {
    return {
        changeCarData(carEntity) {
            const action = actionCreator.changeCarData(carEntity);
            dispatch(action);
        }
    };
};


export default connect(mapStatus, dispatchStatus)(FeatureComponent);


const featureWrapperStyle = {
    padding: "10px 10px 0",
    position: "relative",
    height: 150,
};

const featureItemStyle = {
    height: 120,
    border: "1px solid #ccc",
    borderTopStyle: "solid",
    borderTopWidth: 2,
    boxSizing: 'border-box',
    position: "relative",
};


const featureIConStyle = {
    position: "absolute",
    left: 6,
    top: "50%",
    transform: "translateY(-50%)",
    fontSize: 36,
    lineHeight: "46px",
    width: 46,
    height: 46,
    textAlign: "center",
    borderRadius: 23,
    color: "#fff",

};

const featureExplainStyle = {
    position: "absolute",
    right: 6,
    top: "50%",
    transform: "translateY(-30%)",
};

const explainTitleStyle = {
    fontSize: 18,
    color: "#333",
    fontWeight: 400,
    textAlign: "end",
};

const explainContentStyle = {
    fontSize: 12,
    marginTop: 16,
};


const featureDragStyle = {
    position: "absolute",
    left: "50%",
    bottom: 0,
    transform: "translateX(-50%)",
    height: 20,
};